<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('网站后台首页')"></head>
<head>
  <link rel="stylesheet" th:href="@{/css/back/back-see-all-question.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="~{/common/common :: common_header_back('','全部试题')}"></header>

<article>
  <!-- 侧边栏部分 -->
  <nav th:include="~{/common/common :: common_left_nav('','')}"></nav>
  <!-- 显示内容的部分 -->
  <div class="context-wrap">
    <!-- 按照指定的内容搜索 -->
    <div class="demoTable">
      请输入关键词汇：
      <div class="layui-inline">
        <input class="layui-input" id="search" autocomplete="off">
      </div>
      <button class="layui-btn" id="search-button" data-type="reload">搜索</button>
    </div>
    <!-- 数据表格 -->
    <table class="layui-hide" id="question-table" lay-filter="question-table"></table>
    <!-- 头部工具栏 -->
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add-question">添加试题</button>
<!--        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete-question">删除试题</button>-->
        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="subject-one">数学</button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="subject-four">化学</button>
      </div>
    </script>
    <!-- 操作按钮 -->
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="detail">查看详细</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
    <!-- 设置为考试试题 -->
<!--    <script type="text/html" id="test-question">-->
<!--      &lt;!&ndash; 这里的 checked 的状态只是演示 &ndash;&gt;-->
<!--      <input type="checkbox" name="questionTest" value="{{d.questionId}}" title="考试题" lay-filter="testQuestion" {{d.questionTest ? 'checked' : '' }}>-->
<!--    </script>-->
  </div>
</article>

</body>
</html>
<script>
  layui.use(['element','table'], function(){
    let table = layui.table;
    let form = layui.form;
    let $ = layui.$;
    let layer = layui.layer;
    table.render({
      elem: '#question-table'
      ,url:'/question/getAllQuestion'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print']
      ,title: '用户数据表'
      ,cols: [
              [
         {type: 'checkbox', fixed: 'left'}
        ,{field:'questionId', title:'ID', width:60, fixed: 'left', unresize: true, sort: true}
        ,{field:'questionTopic', title:'问题题目', width:280}
        ,{field:'questionA', title:'选项A', width:135}
        ,{field:'questionB', title:'选项B', width:135}
        ,{field:'questionC', title:'选项C', width:135}
        ,{field:'questionD', title:'选项D', width:135}
        ,{field:'questionAnswer', title:'答案', width:80}
        // ,{field:'questionTest', title:'考试试题', width:125, templet: '#test-question', unresize: true}
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
      ]
      ]
      ,id: 'questionTable'
      ,limits:[2,4,6,8,10]
      ,page: true
    });

    //数据表格头部的按钮事件
    table.on('toolbar(question-table)', function(obj){
      switch(obj.event){
        case 'add-question':
          window.location.href="/page/backAddQuestion";
          break;
        case 'delete-question':
          layer.alert('删除试题');
          break;
        case 'subject-one':
          //执行重载
          table.reload('questionTable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              classify: 1,
            }
          });
          break;
        case 'subject-four':
          //执行重载
          table.reload('questionTable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              classify: 4,
            }
          });
          break;
      };
    });

    //设置考试试题的操作
    form.on('checkbox(testQuestion)', function(obj){
      $.post("/question/setQuestionTest",{questionId: this.value,questionTest:obj.elem.checked},function (res){
        if (res == 1){
          layer.tips("设置成功", obj.othis);
        }else{
          layer.tips("设置失败", obj.othis);
        }
      })
    });

    //搜索之后数据表格重载
    $("#search-button").on("click",function (){
      //执行重载
      table.reload('questionTable', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          search: $("#search").val(),
        }
      });
    });

    //监听行工具事件
    table.on('tool(question-table)', function(obj){
      let data = obj.data;

      //删除指定行数据
      if(obj.event === 'delete'){
        $.ajax({
          url: '/question/deleteQuestion',
          data: {
            questionId: data.questionId,
          },
          dataType: 'JSON',
          success: function (res){
            if (res == 1){
              layer.msg("删除成功");
            }
            //执行重载
            table.reload('questionTable', {
              page: {
                curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
              }
            });
          }
        },JSON)
      }

      //查看详细数据
      if(obj.event === 'detail'){
          layer.open({
            type: 1,
            area: '800px',
            title: ['详细信息', 'text-align:center;'],
            moveOut: true,
            shadeClose: true,
            content: `<div class="layui-card">
                        <div class="layui-card-body">
                          <table class="layui-table">
                            <colgroup>
                              <col width="50">
                              <col width="200">
                            </colgroup>
                            <tbody>
                               <tr>
                                <td>所属科目</td>
                                <td>${data.questionClassify === 1 ? '科目一' : '科目四'}</td>
                               </tr>
                               <tr>
                                <td>问题题目</td>
                                <td>${data.questionTopic}</td>
                               </tr>
                               <tr>
                                <td>选项A内容</td>
                                <td>${data.questionA}</td>
                               </tr>
                               <tr>
                                <td>选项B内容</td>
                                <td>${data.questionB}</td>
                               </tr>
                               <tr style="${data.questionC == '' ? 'display:none;':(data.questionC == null ? 'display:none;':'')}">
                                <td>选项C内容</td>
                                <td>${data.questionC}</td>
                               </tr>
                               <tr style="${data.questionD == '' ? 'display:none;':(data.questionD == null ? 'display:none;':'')}">
                                <td>选项D内容</td>
                                <td>${data.questionD}</td>
                               </tr>
                               <tr style="${data.questionE == '' ? 'display:none;':(data.questionE == null ? 'display:none;':'')}">
                                <td>选项E内容</td>
                                <td>${data.questionE}</td>
                               </tr>
                               <tr style="${data.questionF == '' ? 'display:none;':(data.questionF == null ? 'display:none;':'')}">
                                <td>选项F内容</td>
                                <td>${data.questionF}</td>
                               </tr>
                               <tr style="${data.questionG == '' ? 'display:none;':(data.questionG == null ? 'display:none;':'')}">
                                <td>选项G内容</td>
                                <td>${data.questionG}</td>
                               </tr>
                               <tr>
                                <td>问题答案</td>
                                <td>${data.questionAnswer}</td>
                               </tr>
                               <tr>
                                <td>问题解释</td>
                                <td>${data.questionExplain}</td>
                               </tr>
                               <tr style="${data.questionImage == '' ? 'display:none;':(data.questionImage == null ? 'display:none;':'')}">
                                <td>问题照片</td>
                                <td><img src="${data.questionImage}" alt=""></td>
                               </tr>
                               <tr>
                                <td>添加时间</td>
                                <td>${data.created}</td>
                               </tr>
                               <tr>
                                <td>最后一次修改时间</td>
                                <td>${data.modified}</td>
                               </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>`,
          });
      }
    });
  });

</script>